<!--文件上传-->
<template>
  <ele-modal
    width="460px"
    :visible="visible"
    :append-to-body="true"
    :close-on-click-modal="true"
    custom-class="ele-dialog-form"
    title="视频"
    limit="1"
    @update:visible="updateVisible"
  >
    <el-upload
      ref="upload"
      :disabled="loading == true?true:false"
      :file-list="fileList"
      :on-change="onUpload"
      :auto-upload="false"
      accept=".mp4,.3gp,.mov"
      class="upload-demo"
      drag
      :action="ossUrl"
      multiple>
      <i class="el-icon-upload" v-show="loading == false"></i>
      <el-image v-show="loading == true" style="width: 67px;    margin: 40px 0 16px;
    line-height: 50px;" :src="require('/src/assets/loading.gif')"></el-image>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">只能上传.mp4,.3gp,.mov文件，且不超过100M</div>
    </el-upload>
    <template v-slot:footer>
    <el-button
      size="small"
      @click="updateVisible(false)"
    >
      取消上传
    </el-button>
    <el-button
      :loading="loading"
      size="small"
      type="primary"
      @click.stop="selectVideo()"
    >
      开始上传
    </el-button>
    </template>
  </ele-modal>
</template>

<script>
  import axios from 'axios'
  import {getToken} from "../../../../utils/token-util";
  import OSS from 'ali-oss';
  import { addUserFile, userOssList,userOssSignature,registerMedia} from '@/api/creatCenter/material';
    export default {
        name: "file-upload",
      props: {
        // 弹窗是否打开
        visible: Boolean,
      },
      data() {
        return {
          ossUrl:localStorage.getItem('ossUrl')?localStorage.getItem('ossUrl'):'', //上传图片action
          loading:false,
          fileList:[],
          data:{},
          isFile:false,
          // 用于判断，是否上传到最后一个
          isNum:0
        };
      },
      created() {
      },
      methods:{
        async selectVideo(){
          this.isNum=0
          console.log("this.fileList.length",this.fileList.length,'this.fileList',this.fileList)
          if(this.fileList.length < 1) {
            console.log("请选择文件后提交")
            this.$message.error('请选择文件后提交');
            return
          }
          let isLt = true
          for(let i=0;i<this.fileList.length;i++){
            // 判断是否小于2mb
            if(this.fileList[i].size / 1024 / 1024 > 100){
              isLt=false
            }
          }
          if (!isLt) {
            for(let i=0;i<this.fileList.length;i++){
              // 判断是否小于2mb
              if(this.fileList[i].size / 1024 / 1024 > 100){
                this.fileList.splice(i,1)
              }
            }
            this.$message.error("请上传小于100MB文件");
            return
          }
          this.isFile=true
          this.loading=true
          this.onUpload()
        },

        /* 上传 */
        async onUpload() {
          this.fileList=this.fileList[0]
          console.log('this.fileList',this.fileList)
          this.data = await userOssSignature()
          let file = this.fileList.raw
          let filename = file.name;
          let markIndex = (filename).lastIndexOf('.');
          let suffix = filename.substring(markIndex)
          let date = new Date().getTime();
          // 构建请求参数
          let param = new FormData()
          param.append("key", this.data.dir + date + suffix)
          param.append("policy", this.data.policy)
          param.append("OSSAccessKeyId", this.data.accessId)
          param.append("success_action_status", '200')
          // param.append("callback",  this.data.callback)     //回调（not)
          param.append("signature", this.data.signature)
          param.append("file", file, file.name)
          param.append('success_action_status', '200')
          let config = {
            headers: {
              'Access-Control-Allow-Origin': '*',
              'x-oss-callback-Authorization': getToken()
            }
          }
          axios.post(this.data.host, param, config).then(res => {
            if (res.status == 200) {
              // 修改
              // this.$refs.upload.submit();  // 图片上传进度
              console.log('this.data.host', this.data.host + '/' + date + suffix)
              let videoUrl = this.data.host + '/' + date + suffix;
              this.$emit('done',videoUrl);
            } else {
              this.loading = false
              this.$message.error('上传失败');
            }

          }).catch(err => {
            console.log(err)
          })
        },
        /* 更新 visible */
        updateVisible(value) {
          // 除了上传时，为了避免重复调用push_fileList,所以在上传时标识isFile为true，return_push
          this.isFile=false
          this.fileList=[]
          this.$emit('update:visible', value);
        },

        /* 上传 */
        onUpload(file) {
          console.log("this.isFile",this.isFile)
          // 修改
          /*if(this.isFile==true){
            return
          }*/
          this.fileList.push(file)
          console.log('this.fileList',this.fileList)
        },
      }
    }
</script>

<style scoped>
  /deep/ .el-upload-dragger{
    width: 420px !important;
  }

  /* 上传组件 —— 下load（加载中）图标样式 */
  /deep/ .el-upload-dragger .el-icon-loading{
    font-size: 67px;
    color: var(--color-text-placeholder);
    margin: 40px 0 16px;
    line-height: 50px;
  }
</style>
